<!DOCTYPE html>
<html>
<head>
   <title>Furniture Customization Demo</title>

	<style>
		#container {
			width: 700px;
			margin-left: auto;
			margin-right: auto;
		}
		
		#header {
			border-bottom: solid grey 2px;
			height: 64px;		
			padding-top: 8px;
			margin-left:15%;
			margin-right:199px;
			
			
		}
		
		.settings-block{
		    height:200px;
			width:300px;
			margin-right:10px;
		}
		
		.settings-div {
			min-width: 980px;
		    margin-top:20px;
			margin-left:15%;
			border: 0px solid red;
		}

		#id-menu-shelf{
		border-bottom:solid blue 2px;
		}
		#id-menu-sofa{
		border-bottom:solid blue 2px;
		}
		#id-menu-kitchen{
		border-bottom:solid blue 2px;
		}
		#id-menu-contact{
		border-bottom:solid blue 2px;
		} 
				
		.headerTitle {
			text-align: left;
			color: gray;
			font-family:sans-serif;
			
		}
	
		ul#menu {
			padding: 0;
			text-align: center;
			float: right;
				
		}

		ul#menu li {
			display: inline;
		}

		ul#menu li span {
			//background-color: white;
			color: blue;
			padding: 10px 20px;
			text-decoration: none;
			border-radius: 4px 4px 0 0;
			font-family:sans-serif;
			cursor:pointer;
		}

		.menu_option_selected {
			background-color: lightblue;
		}
		
		#id-container3d {
			min-height: 450px;
			margin-left:15%;
			margin-right:15%;
		}
		
		#id-sofa-container3d {min-height: 450px;
		margin-left:15%;
		margin-right:15%;
		}
		
		#settingsForm p {
			margin-top: 0px;
			margin-bottom: 0px;
			
		}
		#settingsForm {
		margin-top:18px;
		margin-left: 4px;
		
		}
		.aSpan{
		position:relative;
		background-color:white;
		text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em darkblue;
        color: white;
		

		}
		
		.formRow {
			display: block
			
		}
		
		.formRow label {
			display: inline-block;
			width: 108px;
			font-family:sans-serif;
			
		}
		.formButton1 {
		background-image:url("media/wood_side_light.jpg");
		height: 50px;
		width: 50px;
		margin-top:30px;
		cursor:pointer;
		margin-left:-130px;
		margin-right:15px;
		}
		.formButton2 {
		background-image:url("media/wood_side_red.jpg");
		height:50px;
		width:50px;
		margin-top:30px;
		margin-right:15px;
		cursor:pointer;
		}
		.formButton3 {
		background-image:url("media/wood_side_dark.jpg");
		height:50px;
		width:50px;
		margin-top:30px;
		margin-right:15px;
		cursor:pointer;
		}
		.formButton4 {
		background-image:url("media/sofa1.jpg");
		height:50px;
		width:50px;
		margin-top:30px;
		cursor:pointer;
		}
		.formButton5 {
		background-image:url("media/sofa2.jpg");
		height:50px;
		width:50px;
		margin-top:30px;
		cursor:pointer;
		}
		.formButton6 {
		background-image:url("media/koza1.jpg");
		height:50px;
		width:50px;
		margin-top:30px;
		cursor:pointer;
		}
		.formButton7 {
		background-image:url("media/jastuk3.jpg");
		height:50px;
		width:50px;
		margin-top:30px;
		cursor:pointer;
		}
		.formButton8 {
		background-image:url("media/jastuk5.jpg");
		height:50px;
		width:50px;
		margin-top:30px;
		cursor:pointer;
		}
		.formButton9 {
		background-image:url("media/sofa 4.jpg");
		height:50px;
		width:50px;
		margin-top:30px;
		cursor:pointer;
		}
		.formButton10 {
		background-image:url("media/sofa 4.jpg");
		height:50px;
		width:50px;
		margin-top:30px;
		cursor:pointer;
		}
		.formButton11 {
		background-image:url("media/koza2.jpg");
		height:50px;
		width:50px;
		margin-top:30px;
		cursor:pointer;
		}
		.formButton12 {
		background-image:url("media/jastuk6.jpg");
		height:50px;
		width:50px;
		margin-top:30px;
		cursor:pointer;
		}
		.formButton13 {
		background-image:url("media/wood_side_dark.jpg");
		height:50px;
		width:50px;
		margin-top:30px;
		cursor:pointer;
		}
		
		.formButton14 {
		background-image:url("media/wood_side_light.jpg");
		height:50px;
		width:50px;
		margin-top:-25px;
		margin-right:15px;
		margin-left:-10px;
		cursor:pointer;
		}
		.formButton15 {
		background-image:url("media/wood_side_red.jpg");
		height:50px;
		width:50px;
		margin-top:-25px;
		margin-right:15px;
		margin-right:15px;
		cursor:pointer;
		}
		.formButton16 {
		background-image:url("media/wood_side_dark.jpg");
		height:50px;
		width:50px;
		margin-top:-25px;
		margin-right:15px;
		cursor:pointer;
		}
		.formButton17 {
		background-image:url("media/wood_side_dark.jpg");
		height:50px;
		width:50px;
		margin-top:-25px;
		cursor:pointer;
		}
		.formButton18 {
		background-image:url("media/wood_side_light.jpg");
		height: 50px;
		width: 50px;
		margin-top:30px;
		cursor:pointer;
		margin-right:15px;
		margin-left:-145px;
		
		}
		.formButton19 {
		background-image:url("media/wood_side_red.jpg");
		height: 50px;
		width: 50px;
		margin-top:30px;
		cursor:pointer;
		
		margin-right:15px;
		}
		.formButton20 {
		background-image:url("media/wood_side_dark.jpg");
		height: 50px;
		width: 50px;
		margin-top:30px;
		cursor:pointer;
		
		margin-right:15px;
		}
		.formButton21 {
		background-image:url("media/wood_side_dark.jpg");
		height: 50px;
		width: 50px;
		margin-top:30px;
		cursor:pointer;
		
		margin-right:15px;
		}
		.formButton22 {
		background-image:url("media/wood_side_light.jpg");
		height: 50px;
		width: 50px;
		margin-top:-25px;
		margin-left:-7px;
		margin-right:15px;
		cursor:pointer;
		
		
		}
		.formButton23 {
		background-image:url("media/wood_side_red.jpg");
		height: 50px;
		width: 50px;
		margin-top:-25px;
		cursor:pointer;
		
		margin-right:15px;
		}
		.formButton24 {
		background-image:url("media/wood_side_dark.jpg");
		height: 50px;
		width: 50px;
		margin-top:-25px;
		cursor:pointer;
		
		margin-right:15px;
		}
		.formButton25 {
		background-image:url("media/wood_side_dark.jpg");
		height: 50px;
		width: 50px;
		margin-top:-25px;
		cursor:pointer;
		
		margin-right:15px;
		}
		
		
		
		
		
	</style>
	
	<!-- links to three.js library -->
	<script src="source/three.min.new.js"></script>
	<!-- add for mouse controls, path to this lib could be Three.js library folder/examples/js/controls -->
	<script src="source/controls/OrbitControls.js"></script>
	<!-- links to furniture code -->
	<script src="source/furniture.js"></script>
	<!-- links to ui code -->
	<script src="source/ui.js"></script>
	<!-- links to util code -->
	<script src="source/util.js"></script>
	
	<script>
		function quickTest() {
			console.log('use this for quick testing');
		};
	</script>	
</head>

<body onload="mainy()">

	<div id="header">
		<ul id="menu">
		 <li><span id="id-menu-shelf" onclick="goToShelfTab()" class="menu_option_selected">Shelf</span></li>
		 <li><span id="id-menu-sofa" onclick="goToSofaTab()" >Sofa</span></li>
		 <li><span id="id-menu-kitchen" onclick="goToKitchenTab()" >Kitchen</span></li>
		 <li><span id="id-menu-contact" onclick="goToContactTab()" >Contact</span></li>
		</ul>  

		<h3 class="headerTitle">Furniture 3D</h3>
		
	</div>

	<!-- shelf tab div -->
	<div id="id-shelf-container">
	  
		<div id="id-container3d"></div>
	 
		<div id="id-settings" class="settings-div">
			<div id="id-settings-dim" class="settings-block" style="float:left; border:solid grey 1px">
			       <span class="aSpan"	 style="padding: 8px; top: -10px;left:8px">CUSTOMIZE DIMENSIONS :</span>
				<form id="settingsForm">
					<span class="formRow"><label for="width">Width:</label>   <input type="number" name="width" id="id-input-shelf-width" value="60" onchange="changeWidth()" ></span>
					<span class="formRow"><label for="height">Height:</label>  <input type="number" name="height" id="id-input-shelf-height" value="100" onchange="changeHeight()"></span>
					<span class="formRow"><label for="depth">Depth:</label>   <input type="number" name="depth" id="id-input-shelf-depth" value="30" onchange="changeDepth()"></span>
					<span class="formRow"><label for="rows">Rows:</label>    <input type="number" name="rows" id="id-input-shelf-rows" value="2" onchange="changeRows()"></span>
					<span class="formRow"><label for="columns">Columns:</label> <input type="number" name="columns" id="id-input-shelf-columns" value="1" onchange="changeColumns()"></span>
					<span class="formRow"><label for="h_thicness">H-Thicness:</label> <input type="number" name="h_thicness" id="id-input-shelf-h_thicness" value="3" onchange="changePlankThicknessHorizontal()"></span>
					<span class="formRow"><label for="v_thicness">V-Thicness:</label> <input type="number" name="v_thicness" id="id-input-shelf-v_thicness" value="3" onchange="changePlankThicknessVertical()"></span>
				</form>
			</div>

			<div id="id-settings-tex" class="settings-block" style="float:left; border: solid grey 1px;">
                <span class="aSpan"	 style="padding: 8px; top: -55px;left:14px">SIDES TEXTURES :</span>			
				<input class="formButton1" type="button" onclick="changeTexture('media/wood_side_light.jpg')"></input>
				<input class="formButton2" type="button" onclick="changeTexture('media/wood_side_red.jpg')"></input>
				<input class="formButton3" type="button" onclick="changeTexture('media/wood_side_dark.jpg')"></input>
				<input class="formButton13" type="button" onclick="changeTexture('media/wood_side_dark.jpg')"></input>
				<div id="id-settings-tex1" style="margin-top:50px;margin-left:30px;">
				<input class="formButton14" type="button" onclick="changeTexture('media/wood_side_light.jpg')"></input>
				<input class="formButton15" type="button" onclick="changeTexture('media/wood_side_red.jpg')"></input>
				<input class="formButton16" type="button" onclick="changeTexture('media/wood_side_dark.jpg')"></input>
				<input class="formButton17" type="button" onclick="changeTexture('media/wood_side_dark.jpg')"></input>	
				</div>
				
			</div>
			<div id="id-setting-tex2" class="settings-block" style="float:left; border:solid grey 1px;">
			    <span class="aSpan"	 style="padding: 8px; top: -54px;left:14px">STRIPES TEXTURES :</span>	
				<input class="formButton18" type="button" onclick="changeTexture('media/wood_side_light.jpg')"></input>
				<input class="formButton19" type="button" onclick="changeTexture('media/wood_side_red.jpg')"></input>
				<input class="formButton20" type="button" onclick="changeTexture('media/wood_side_dark.jpg')"></input>
				<input class="formButton21" type="button" onclick="changeTexture('media/wood_side_dark.jpg')"></input>
				<div id="id-settings-tex4" style="margin-top:50px;margin-left:30px;">
				<input class="formButton22" type="button" onclick="changeTexture('media/wood_side_light.jpg')"></input>
				<input class="formButton23" type="button" onclick="changeTexture('media/wood_side_red.jpg')"></input>
				<input class="formButton24" type="button" onclick="changeTexture('media/wood_side_dark.jpg')"></input>
				<input class="formButton25" type="button" onclick="changeTexture('media/wood_side_dark.jpg')"></input>
				</div>
			</div>
		</div>
		
		
	</div>
	
	<!-- sofa tab div -->
	<div id="id-sofa-container" style="display:none;">
	  
		<div id="id-sofa-container3d"></div>

		<div id="id-sofa-base-tex">
			Choose Base Texture: 
			<input class="formButton4" type="button" onclick="changeSofaTexture('./media/sofa1.jpg',SOFA_PART_BASE)"></input>
			<input class="formButton5" type="button" onclick="changeSofaTexture('./media/sofa2.jpg',SOFA_PART_BASE)"></input>
			<input class="formButton6" type="button" onclick="changeSofaTexture('./media/koza1.jpg',SOFA_PART_BASE)"></input>
		</div>
		<div id="id-sofa-seat-tex">
			Choose Seat Texture: 
			<input class="formButton7" type="button" onclick="changeSofaTexture('./media/jastuk3.jpg',SOFA_PART_SEAT)"></input>
			<input class="formButton8" type="button" onclick="changeSofaTexture('./media/jastuk5.jpg',SOFA_PART_SEAT)"></input>
			<input class="formButton9" type="button" onclick="changeSofaTexture('./media/sofa 4.jpg',SOFA_PART_SEAT)"></input>
		</div>
		<div id="id-sofa-cushion-tex">
			Choose Cushion Texture: 
			<input class="formButton10" type="button" onclick="changeSofaTexture('./media/sofa 4.jpg',SOFA_PART_CUSHION)"></input>
			<input class="formButton11" type="button" onclick="changeSofaTexture('./media/koza2.jpg',SOFA_PART_CUSHION)"></input>
			<input class="formButton12" type="button" onclick="changeSofaTexture('./media/jastuk6.jpg',SOFA_PART_CUSHION)"></input>
		</div>
	</div>
	
	
	<!-- kitchen tab div -->
	<div id="id-kitchen-container" style="display:none;">
	  
		<div id="id-kitchen-container3d"></div>

		<input class="formButton1" type="button" onclick="changekitchenTexture('media/wood_side_light.jpg')"></input>
		<input class="formButton2" type="button" onclick="changekitchenTexture('media/wood_side_red.jpg')"></input>
		<input class="formButton3" type="button" onclick="changekitchenTexture('media/wood_side_dark.jpg')"></input>

	</div>
	
	<!-- contact tab div -->
	<div id="id-contact-container" style="display:none;">
	  
		<div id="id-contact-container3d"></div>

	</div>
	
</body>

</html>